<template>
    <!--底部导航栏-->
    <div>
        <van-tabbar v-model="active">
            <van-tabbar-item icon="wap-home" @click="HomeClick">首页</van-tabbar-item>
            <van-tabbar-item icon="shop" dot @click="ShopClick">商城</van-tabbar-item>
            <van-tabbar-item icon="contact" @click="MeClick">我的</van-tabbar-item>
        </van-tabbar>
    </div>

</template>

<script>
    import Vue from 'vue'
    import {Tabbar, TabbarItem} from 'vant';

    Vue.use(Tabbar).use(TabbarItem);

    export default {
        data() {
            let tabsIndex = {
                'home': 0,
                'mall': 1,
                'my': 2
            }

            return {
                // selected: './home',
                active: tabsIndex[this.tab]
            };
        },
        props: ['tab'],
        watch: {
            selected: function (val) {
                this.$router.push({path: val})
            }
        },
        methods: {
            HomeClick() {
                this.$router.push({
                    path: `/home`,
                    query: {mui:1}
                })
            },
            ShopClick() {
                this.$router.push({
                    path: `/order`,
                    query: {mui: 1}
                })
            },
            MeClick() {
                this.$router.push({
                    path: `/me`,
                    query: {mui: 1}
                })
            }
        },
        activated() {
            let tabsIndex = {
                'home': 0,
                'mall': 1,
                'my': 2
            }
            this.active   = tabsIndex[this.tab];
        }
    }
</script>

<style>

</style>
